<template>
  <div class="app-content">
    <Tabs>
      <TabPane label="风险信息">
        <div class="app-form">
          <Form label-position="top">
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="公司名称">
                  <Input
                    v-model.trim="editModel.enterpriseName"
                    :title="editModel.enterpriseName"
                    disabled
                  />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="项目名称">
                  <Input
                    v-model.trim="editModel.projectName"
                    :title="editModel.projectName"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="工点名称">
                  <Input
                    v-model.trim="editModel.constructionPointName"
                    :title="editModel.constructionPointName"
                    disabled
                  />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="工点风险等级">
                  <Input v-model.trim="editModel.distRiskGrade" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="起始时间">
                  <Input v-model.trim="editModel.startTime" disabled />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="结束时间">
                  <Input v-model.trim="editModel.endTime" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="是否在施">
                  <Input v-model.trim="editModel.isWork" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="工点描述">
                  <Input
                    v-model.trim="editModel.constructionPointDescription"
                    :title="editModel.constructionPointDescription"
                    disabled
                  />
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="作业风险名称">
                  <Input
                    v-model.trim="editModel.riskName"
                    :title="editModel.riskName"
                    disabled
                  />
                </FormItem>
              </Col>

              <Col span="11">
                <FormItem label="作业风险类别">
                  <Select
                    v-model="editModel.riskCategoryIds"
                    multiple
                    :disabled="detailFlag"
                    :title="riskTypeName"
                  >
                    <Option
                      v-for="item in riskCategories"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.riskCategoryName }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="作业风险等级">
                  <Select v-model="editModel.riskLevel" :disabled="detailFlag">
                    <Option
                      v-for="item in riskLevels"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.text }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>

              <Col span="11">
                <FormItem label="分级方法">
                  <Select
                    v-model="editModel.classificationMethodId"
                    :disabled="detailFlag"
                    :title="levelName"
                  >
                    <Option
                      v-for="item in methods"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.classificationMethodName }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="具体风险描述">
                  <Input
                    type="textarea"
                    v-model="editModel.riskDescription"
                    :disabled="detailFlag"
                  />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
        <Row type="flex" justify="center" v-if="!detailFlag">
          <Col>
            <Button class="mr-15" type="primary" @click="save">保存</Button>
            <Button @click="close">取消</Button>
          </Col>
        </Row>
      </TabPane>
      <TabPane label="审批进度">
        <div class="process-recent">{{ processModel.yourMessage }}</div>
        <Timeline>
          <TimelineItem
            color="blue"
            v-for="(item, index) in processModel.timeline"
            :key="index"
          >
            <Icon type="ios-radio-button-on" slot="dot" />
            <div class="process-container">
              <h4 class="process-title">
                {{ item.name }}：<span
                  :class="1 == item.audit ? 'audit--success' : 'audit--danger'"
                  >{{ item.auditName }}</span
                >
              </h4>
              <div class="process-list">
                <Row
                  :gutter="32"
                  type="flex"
                  v-for="(row, innerIndex) in item.timelineItemDetailsList"
                  :key="innerIndex"
                >
                  <Col :md="8" :lg="5" :xl="4" :xxl="3">
                    <span class="process-name">{{ row.userName }}</span>
                    <span class="process-position" v-if="row.userPost">
                      （{{ row.userPost }}）
                    </span>
                  </Col>
                  <Col>
                    于
                  </Col>
                  <Col>
                    <strong>{{ row.createTime }}</strong>
                  </Col>
                  <Col>
                    <span v-if="index > 0">进行</span>
                    <strong>{{ row.processName }}</strong>
                  </Col>
                  <Col v-if="index > 0">
                    审批<strong
                      :class="
                        1 == row.audit ? 'audit--success' : 'audit--danger'
                      "
                      >{{ row.auditName }}</strong
                    >
                  </Col>
                  <Col v-if="index > 0"
                    >并填写说明：<span>{{ row.textContent }}</span>
                  </Col>
                </Row>
              </div>
              <div class="process-angle"></div>
            </div>
          </TimelineItem>
        </Timeline>
      </TabPane>
      <TabPane label="问询回复">
        <replyInquiries :businessType="businessType" :editModel="editModel"></replyInquiries>
      </TabPane>
    </Tabs>
    <span class="inquiries" @click="replyChild()">{{$route.query.message == true ? '回复' : '问询'}}</span>
    <!-- <inquiries ref="isInquiriesBox" :checkedRows="checkedRows" :businessType="businessType"></inquiries>
    <checkPerson></checkPerson> -->
    <Modal v-model="isInquiries" title="业务问询" width="50%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <inquiries ref="isInquiriesBox" :checkedRows="checkedRows" :businessType="businessType" @modelBox="modelBox" @person="person"></inquiries>
      </div>
    </Modal>
    <Modal v-model="personModel" title="选择人" width="80%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <checkPerson @personBox="personBox"></checkPerson>
      </div>
    </Modal>
  </div>
</template>

<script>
import inquiries from '../../components/modules/inquiries/index'
import checkPerson from '../../components/modules/inquiries/checkPerson'
import replyInquiries from '../../components/modules/inquiries/replyInquiries'
import { mapMutations } from 'vuex'
export default {
  components:{
    inquiries,
    checkPerson,
    replyInquiries
  },
  name: 'RiskIdentificationOperation',
  props: {
    // 标识id
    id: {
      type: String,
      required: true
    },
    // 可编辑标识 2：修订 3：动态辨识 4:详情
    flag: {
      type: [String, Number],
      required: false,
      default: 4
    },
  },
  data() {
    return {
      businessType:'businesstype_identification',
      isInquiries:false,
      personModel:false,
      checkedRows:[],
      editModel: {},
      processModel: {},
      // 风险类别条目
      riskCategories: [],
      // 分级方法
      methods: [],
      //风险等级
      riskLevels: [
        { text: 'I级', value: 1 },
        { text: 'II级', value: 2 },
        { text: 'III级', value: 3 },
        { text: 'IV级', value: 4 }
      ]
    }
  },
  computed: {
    detailFlag: vm => {
      return 4 == vm.flag
    },
    riskTypeName: vm => {
      let name = ''
      if (
        vm.editModel.riskCategoryIds &&
        vm.editModel.riskCategoryIds.length > 0 &&
        vm.riskCategories.length > 0
      ) {
        const selected = vm.riskCategories.filter(
          r => vm.editModel.riskCategoryIds.indexOf(r.id) > -1
        )
        if (selected) name = selected.map(s => s.riskCategoryName).join(',')
      }
      return name
    },
    levelName: vm => {
      let name = ''
      if (vm.editModel.classificationMethodId && vm.methods.length > 0) {
        const selected = vm.methods.find(
          m => m.id === vm.editModel.classificationMethodId
        )
        if (selected) name = selected.classificationMethodName
      }
      return name
    }
  },
  methods: {
    replyChild(){
      if(this.checkedRows.length == 0){
        this.checkedRows.push(this.editModel)
      }
      if(this.$route.query.message){
          this.$router.push({
            name:'replyInquiries-detail',
            query:{
              source:this.$route.query.source,
              businessType:this.$route.query.businessType,
              objectId:this.$route.query.objectId,
              id:this.$route.query.id,
              riskName:this.$route.query.riskName,
            }
          })
        }else{
          this.isInquiries = true
          this.$refs.isInquiriesBox.isModel()
        }
    },
    // 关闭问询框
    modelBox(){
      this.isInquiries = false
    },
    // 打开人员选择框
    person(){
      this.personModel = true
    },
    // 关闭人员选择框
    personBox(){
      this.personModel = false
    },
    ...mapMutations(['closeTag']),
    init() {
      const riskRequest = this.$api.measurePlan.getRiskDetail(this.id)
      const processRequest = this.$api.riskIdentification.process(this.id)
      Promise.all([riskRequest, processRequest]).then(results => {
        const [riskResult, processResult] = results
        if (200 === riskResult.code && 200 === processResult.code) {
          const riskData = riskResult.data
          const processData = processResult.data
          riskData.riskCategoryIds = riskData.riskCategoryIds
            ? riskData.riskCategoryIds.split(',')
            : []
          riskData.type = this.flag
          this.editModel = riskData
          this.processModel = processData
        } else {
          this.$Message.error('查询详情信息失败')
        }
      })
    },
    // 获取风险类别
    initRiskCategories() {
      this.$api.measuresLibrary
        .getRiskCategoryFindAll()
        .then(({ code, data }) => {
          if (code === 200) {
            this.riskCategories = data
          }
        })
    },
    //分级方法
    initMethods() {
      this.$api.measuresLibrary
        .getRiskOperationClassificationMethod()
        .then(({ code, data, message }) => {
          if (code === 200) {
            this.methods = data
          } else {
            this.$Message.error(message)
          }
        })
    },
    save() {
      let copy = JSON.parse(JSON.stringify(this.editModel))
      copy.riskCategoryIds = copy.riskCategoryIds.join(',')
      this.$api.riskIdentification.edit(copy).then(({ code, message }) => {
        if (200 === code) {
          this.$Message.success('保存成功')
          this.close()
        } else {
          this.$Message.error(message)
        }
      })
    },
    close() {
      this.closeTag({
        name: this.$route.name,
        params: { ...this.$route.params },
        query: { ...this.$route.query }
      })
    }
  },
  mounted() {
    this.initRiskCategories()
    this.initMethods()
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.app-content {
  padding: 35px 25px;
}
</style>
